<template>
	<div class="feedback">
		<div class="back">
			<el-button class="btn" type="primary" @click="goback">返回</el-button>
		</div>
		<div class="pageTicket">
			<el-table :data="pageTicket" style="width: 100%">
			    <el-table-column prop="userName" label="意见人">
				</el-table-column>
			    <el-table-column prop="wareName" label="商品名称">
				</el-table-column>
			    <el-table-column prop="ordersId" label="订单号">
				</el-table-column>
			    <el-table-column prop="commentTime" label="反馈时间">
				</el-table-column>
			</el-table>
			<h3 class="fank">反馈内容
				<p v-for="x in pageTicket" key="x">
					<span>{{x.commentContent}}</span>
					<span class="imgBox">
						<img v-for="y in imgs" :key="y" :src="baseUrl+y"/>
					</span>
				</p>
			</h3>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl:require("../assets/baseUrl.js").baseUrl,
				pageTicket:[],
				imgs:[],
			}
		},
		methods:{
			//跳转列表
			goback(){
				//this.$router.go(-1)
				this.$router.push("/setup/setuplist")
			},
			
			Time(){
				this.pageTicket.forEach(v=>{
					let str=v.commentTime+""
					//console.log(str)
					v.commentTime=str.substring(0,10)
				})
			},
			//详情
			getCuntent(){
				//接口	http://localhost:8081/oponion/menxiang
				this.$http.post(this.baseUrl + 'comments/menxiang',{
					 commentId:this.$route.query.commentId
				}).then(res=>{
					//console.log(res)
					if(res.data.code == 200){
						this.pageTicket=res.data.data.comment
						this.imgs=res.data.data.commentImgs
						this.Time()
					}
				})
			}
		},
		mounted() {
			//获取详情
			this.getCuntent()
		}
	}
</script>

<style lang="less">
	.back{
		margin-left:8%;
		margin-bottom:20px;
	}
	.pageTicket{
		width: 90%;
		.el-table tr{
			background-color: #fcfcfc;
			color: #333;
			font-size: 15px;
			font-weight: bolder;
		}
		.el-table th.el-table__cell{
			background-color: #fcfcfc;
		}
		.el-table th.el-table__cell>.cell{
			color: #333;
			font-size: 19px;
		}
		.fank{
			//margin: 5% 5% 0 10%;
			margin-top: 5%;
			margin-left: 10%;
			color: #333;
			p{
				width: 93%;
				//height: 320px;
				border: 2px solid #a7a6a6;
				border-radius: 5px;
				margin-top: 10px;
				// display: flex;
				// flex-wrap: wrap;
				// align-content: space-around;
				span{
					display: block;
					font-weight: normal;
					margin-top: 10px;
					margin-left: 10px;
				}
				.imgBox{
					margin-top: 70px;
					img{
						height: 180px;
						margin-right: 5%;
					}
				}
			}
		}
		.el-table__empty-block{
			background-color: #fcfcfc;
		}
		.el-table *{
			border: none !important;
			text-align: center;
		}
		.el-table::before{
			height: 0px;
		}
	}
</style>